<template>
  <el-dialog :title="handleType=='add'?'添加用户':'修改用户'" :visible.sync="visible">
    <div class="scroll-y" v-loading="loading">
      <!-- 权限设置 -->
      <el-form label-width="100px" size="small" :model="handleForm" :rules="rules" ref="handleForm">
        <el-form-item label="成员姓名" prop="realName">
          <el-input v-model="handleForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="联系手机" prop="mobile" :required="handleType=='add'">
          <el-input v-model="handleForm.mobile" :disabled="handleType=='update'"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" v-if="handleType=='update'" prop="account">
          <el-input v-model="handleForm.account" disabled></el-input>
        </el-form-item>

        <div v-show="more">
          <el-divider></el-divider>
          <el-form-item label="上传头像">
            <UploadAvatar :avatar="handleForm.head" @getAvaTar="getAvaTar" />
          </el-form-item>
          <el-row>
            <el-col :md="12">
              <el-form-item label="联系邮箱" prop="email">
                <el-input v-model="handleForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="员工性别" prop="sex">
                <el-radio-group v-model="handleForm.sex">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="入职时间" prop="entryDate">
                <el-date-picker
                  v-model="handleForm.entryDate"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="员工工号" prop="staffNo">
                <el-input v-model="handleForm.staffNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="联系QQ" prop="qq">
                <el-input v-model="handleForm.qq"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="员工籍贯" prop="nativePlace">
                <el-input v-model="handleForm.nativePlace"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12">
              <el-form-item label="员工生日" prop="birthday">
                <el-date-picker
                  v-model="handleForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="是否在职" prop="accountStatus">
                <el-switch
                  v-model="handleForm.accountStatus"
                  :active-value="1"
                  :inactive-value="0"
                  :active-color="$store.state.settings.themeColor"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="handleForm.address"></el-input>
          </el-form-item>
          <el-row>
            <el-col :md="12">
              <el-form-item label="第二联系人" prop="secContactor">
                <el-input v-model="handleForm.secContactor"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="联系人关系" prop="secRelation">
                <el-input v-model="handleForm.secRelation"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="联系电话" prop="secPhone">
            <el-input v-model="handleForm.secPhone"></el-input>
          </el-form-item>
          <el-form-item label="第三方账号"></el-form-item>
        </div>
        <div class="tc mt-20 mb-20">
          <el-link type="primary" class="more-btn" @click="showMore">
            {{more?'收起':'展开'}}详细信息
            <i
              class="el-icon-d-arrow-left el-icon--right"
              :class="{'more':more}"
            ></i>
          </el-link>
        </div>
      </el-form>
      <CheckBox :options="organOp" @getChecked="getOrgansChecked" />
      <CheckBox :options="rolesOp" @getChecked="getRolesChecked" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        @click="submit('handleForm')"
        :loading="submiting"
      >{{handleType=='add'?"新增":"修改"}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import CheckBox from "./CheckBox";
import UploadAvatar from "@/views/user-center/components/UploadAvatar";
import { getUserInfo, userAdd, userUpdate } from "api/seting/user";
import { validPhone } from "@/utils/validate";
export default {
  components: {
    CheckBox,
    UploadAvatar
  },
  props: ["roles", "organs", "visible", "handleRow"],
  data() {
    const validMobile = (rule, value, callback) => {
      if (!validPhone(value) && this.handleType == "add") {
        callback(new Error("手机号码不正确"));
      } else {
        callback();
      }
    };
    return {
      handleForm: {
        realName: "",
        mobile: "",
        head: "",
        accountStatus: null,
        email: "",
        sex: "1",
        entryDate: "",
        staffNo: "",
        qq: "",
        nativePlace: "",
        birthday: "",
        address: "",
        secContactor: "",
        secRelation: "",
        secPhone: ""
      },
      handleType: "add",
      more: false,
      submiting: false,
      loading: false,
      organOp: {
        //部门checkbox 需要的格式
        name: "部门选择",
        tips: "可在“组织架构中”中创建部门",
        isIndeterminate: false,
        checkAll: false,
        checked: [],
        children: []
      },
      rolesOp: {
        //角色checkbox 需要的格式
        name: "角色分配",
        tips: "可在“角色权限管理”中创建角角，并赋予具体权限",
        isIndeterminate: false,
        checkAll: false,
        checked: [],
        children: []
      },
      rules: {
        realName: [
          { required: true, message: "成员姓名不能为空", tigger: "blur" }
        ],
        mobile: [{ validator: validMobile, tigger: "blur" }]
      }
    };
  },
  watch: {
    handleRow: {
      immediate: true,
      handler(val, old) {
        this.handleType = val.id ? "update" : "add";
        if (val.id) {
          this.loadInfo();
        }
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    showMore() {
      this.more = !this.more;
    },
    getAvaTar(avatarId) {
      this.handleForm.head = avatarId;
    },
    // 关闭弹框
    handleClose() {
      if (this.handleForm.id) {
        this.handleForm.id = "";
      }
      this.$refs.handleForm.resetFields();
      this.$emit("getVisible", false);
    },
    getRolesChecked(val) {
      this.handleForm.roleIds = val;
    },
    getOrgansChecked(val) {
      this.handleForm.organIds = val;
    },
    init() {
      this.rolesOp.children = this.roles.map(o => {
        return { name: o.roleName, value: o.id };
      });
      this.organOp.children = this.organs.map(o => {
        return { name: o.organName, value: o.id };
      });
    },
    // 获取用户信息
    loadInfo() {
      if (this.loading) return;
      this.loading = true;
      getUserInfo({
        userId: this.handleRow.id
      }).then(res => {
        let data = res.data;
        this.loading = false;
        this.handleForm.id = data.id;
        this.handleForm.account = data.account;
        this.handleForm.realName = data.realName;
        this.handleForm.head = data.head;
        this.handleForm.mobile = data.mobile;
        this.handleForm.accountStatus = data.accountStatus;
        this.handleForm.email = data.email;
        this.handleForm.sex = data.sex;
        this.handleForm.entryDate = data.entryDate;
        this.handleForm.staffNo = data.staffNo;
        this.handleForm.qq = data.qq;
        this.handleForm.nativePlace = data.nativePlace;
        this.handleForm.birthday = data.birthday;
        this.handleForm.address = data.address;
        this.handleForm.secContactor = data.secContactor;
        this.handleForm.secPhone = data.secPhone;
        this.organOp.checked = data.organs.map(o => o.organId);
        this.rolesOp.checked = data.roles.map(o => o.roleId);
      });
    },
    // 添加修改用户
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.submiting) return;
          this.submiting = true;
          let requestUrl = this.handleType == "add" ? userAdd : userUpdate;
          delete this.handleForm.account;
          requestUrl(this.handleForm)
            .then(res => {
              this.submiting = false;
              this.$message.success("操作成功");
              this.handleClose();
              this.$parent.loadData();
            })
            .catch(err => {
              console.log(err, "xxx");
              this.$message.error(err.msg);
              this.submiting = false;
            });
        } else {
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.more-btn {
  margin: 0 auto;
  .el-icon-d-arrow-left {
    transform: rotate(-90deg);
    transition: linear 0.3s;
    &.more {
      transform: rotate(-270deg);
    }
  }
}
.scroll-y {
  max-height: 60vh;
  overflow-y: scroll;
}
</style>
